<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>lala1</title>
        <style>
            h2{
                text-align: center;
            }
            div.center{
                margin: auto;
                border: 2px solid #73ad21;
                /* width: 60%; */
                padding: 10px;
                text-align: center;
            }
            img{
                display: block;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <h2>元素居中对齐</h2>
        <p>水平居中块元素如div,可以使用margin:auto</p>
        <div class="center">
            <p><b>注意:</b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
            
        </div>

        <h2>图片居中对齐</h2>
        <p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>

        <img src="/imgs/2501.png" alt="square" style="width: 40%;">
    </body>
</html>